<template>
  <div class="Homepage">
    <el-backtop :visibility-height="60">
      <i class="el-icon-caret-top"></i>
    </el-backtop>
    <img src="../assets/banner.png" alt="a" class="topimg" />
    <div class="header">
      <router-link to="/Homepage/Job">
        <div class="headertop">加入我们</div>
      </router-link>
      <div class="headermiddle1">目前公司处于快速扩张阶段，极力打造年轻化团队，诚挚邀请各位有识之士加入我们，共创飞熊的美好明天！</div>
      <div class="headermiddle2">公司为员工提供</div>
      <div class="headerfooter">
        <div class="headerfooterin">
          <div class="li" v-for="(li,index) in provide" :key="index">
            <div class="lin">
              <div class="cicle"></div>
              <span>{{li}}</span>
            </div>
          </div>
        </div>
      </div>
    </div>
    <div class="main">
      <!-- <div class="mainheader">
        <div class="mainheadertop"></div>
        <div class="mainheadermiddle"></div>
      </div>
      <div class="mainbody"></div>-->
      <div class="maintop">热门职位</div>
      <div class="mainmiddle">
        <div
          class="mainmiddletopblock "
          v-for="(a,index) in positions"
          :key="index"
          @click="toDetails(a.id)"
          :style="a.yes"
        >

        <div class="animate__animated animate__fadeInLeft" v-if="isShow1">
          <div class="blocktop">{{a.title}}</div>
          <div class="blockmiddle">
            <i class="el-icon-minus"></i>
          </div>
          <div class="blockfooter">发布时间：{{a.releaseTime}}</div>
        </div>
      </div>
      <div class="mainfooter" v-show="isShow">
        <div class="moreposition">
          <el-button type="primary" @click="Change()">更多岗位</el-button>
        </div>
      </div>
    </div>
  </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      isShow1:false,
      isShow:true,
      positions: [],
      morePositions: [],
      provide: [
        "良好的工作环境",
        "丰厚的薪酬回报",
        "完善的社会保险",
        "定期开展培训课程",
        "丰富的生日及节日礼品",
        "更好发展平台",
      ],
      screenWidth: 1, //屏幕宽
    };
  },
  mounted() {
    var that = this;
    that.screenWidth = document.body.clientWidth;
    this.axios.get("http://dl.sword.ink:2335/recruit").then((response) => {
      var listData = JSON.parse(JSON.stringify(response.data.data));
      // console.log(listData);
      var i;
      for (i = 0; i < listData.length; i++) {
        if (listData[i].releaseTime != undefined)
          listData[i].releaseTime = listData[i].releaseTime.substring(0, 10); //.replaceAll("-","/");
      }
      // console.log(listData);
      this.morePositions = listData;
      var list = JSON.parse(JSON.stringify(listData));
      //把这个数组this.morePositions先变成字符串再变成对象
      list.splice(6, list.length - 6); //从下标为6的数据开始删除list.length-6个
      this.positions = list; //再把这个list赋值给少的
      for (i = 0; i < this.positions.length; i++) {
        this.positions[i].yes = "visibility:visible";
      }
    });
    window.onresize = () => {
      return (() => {
        // console.log(this.positions.length);
        that.screenWidth = document.body.clientWidth;
        if (!that.isShow) {
          if (that.screenWidth >= 1254) {
            that.positions = JSON.parse(JSON.stringify(that.morePositions));
            // console.log(that.positions.length);
            if (that.positions.length % 2 == 1) {
              that.positions[that.positions.length] = {};
              that.positions[that.positions.length - 1].yes =
                "visibility:hidden";
            }
          } else {
            that.positions = JSON.parse(JSON.stringify(that.morePositions));
          }
        }
      })();
    };
    window.addEventListener("scroll", this.windowScroll);
  },
  methods: {
    toDetails(id) {
      this.$router.push({
        name: "position",
        query: {
          id: id,
        },
      });
    },
    windowScroll () {
      let scrollTop =
        window.pageYOffset ||
        document.documentElement.scrollTop ||
        document.body.scrollTop;
        this.opacity = Math.abs(Math.round(scrollTop)) / 100;
      if (this.opacity >= 1) {
        this.isShow1 = true;
      }
    },
    Change() {
      this.isShow = !this.isShow;
      // console.log(this.screenWidth);
      this.positions = JSON.parse(JSON.stringify(this.morePositions));
      if (this.screenWidth >= 1254 && this.positions.length % 2 == 1) {
        // console.log("haha");
        this.positions[this.positions.length] = {};
        this.positions[this.positions.length - 1].yes = "visibility:hidden";
      }
    },
  },
};
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
.Homepage {
  /* border: 1px solid black;  */
  box-sizing: border-box;
  width: 100%;
  max-width: 1880px;
}

.Homepage .topimg {
  width: 100vw;
}
.el-icon-minus:before {
  color: blue;
}
.header {
  width: 100%;
  /* border: 1px solid black; */
  box-sizing: border-box;
  background: #ffffff;
}
.headertop {
  display: flex;
  justify-content: center;
  flex-direction: row;
  flex-wrap: wrap;
  width: 100%;
  margin: 2% 0%;
  /* border: 1px solid black; */
  box-sizing: border-box;
  text-align: center;
  font-weight: bold;
  align-items: center;
  justify-content: center;
  font-size: 27px;
  color: #161629;
  letter-spacing: 3px;
}
.headermiddle1 {
  display: flex;
  flex-direction: row;
  justify-content: center;
  flex-wrap: wrap;
  width: 100%;
  /* border: 1px solid black; */
  box-sizing: border-box;
  color: #4e4e4e;
  text-align: center;
  font-weight: bold;
  font-size: 17px;
  margin-bottom: 2%;
}
.headermiddle2 {
  font-weight: bold;
  display: flex;
  flex-direction: row;
  justify-content: center;
  flex-wrap: wrap;
  color: #4e4e4e;
  /* border: 1px solid black; */
  box-sizing: border-box;
  text-align: center;
  font-size: 18px;
}
.headerfooter {
  display: flex;
  justify-content: center;
  margin-top: 2%;
  width: 100%;
  /* border: 1px solid black; */
  box-sizing: border-box;
  /* min-width: 603px; */
}
.headerfooterin {
  display: flex;
  width: 100%;
  max-width: 800px;
  /* border: 1px solid black; */
  box-sizing: border-box;
  flex-wrap: wrap;
  justify-content: center;
}
.li {
  /* border: 1px solid black;  */
  box-sizing: border-box;
  width: 380px;
  /* height: 50px; */
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  justify-content: center;
}
.lin {
  margin-left: 20%;
  /* border: 1px solid black; */
  box-sizing: border-box;
  width: 220px;
  /* height: 100%; */
  font-size: 15px;
  font-weight: bold;
  margin-bottom: 7%;
}
.cicle {
  /* border: 1px solid black;
  box-sizing: border-box; */
  display: inline-block;
  border-radius: 50%;
  -moz-border-radius: 50%;
  -webkit-border-radius: 50%;
  width: 10px;
  height: 10px;
  background: #3273ff;
  margin-right: 2.5%;
}

.main {
  width: 100%;
  /* border: 1px solid black; */
  box-sizing: border-box;
  background: #eeeeee;
}
.maintop {
  margin: 2% 0;
  width: 100%;
  letter-spacing: 3px;
  /* border: 1px solid black; */
  display: flex;
  align-items: center;
  justify-content: center;
  box-sizing: border-box;
  text-align: center;
  font-weight: bold;
  font-size: 27px;
}
.mainmiddle {
  display: flex;
  justify-content: center;
  flex-direction: row;
  flex-wrap: wrap;
  width: 100%;
  padding: 0 15%;
  /* border: 1px solid black; */
  box-sizing: border-box;
  padding-bottom: 2%;
}
.animate__animated .animate__fadeInLeft {
  --animate-duration: 2s;
}
:root {
  --animate-duration: 800ms;
  --animate-delay: 0.9s;
}
.mainmiddletopblock {
  width: 425px;
  /* height: 15vh; */
  display: flex;
  align-items: center;
  height: 92px;
  /* border: 1px solid black; */
  box-sizing: border-box;
  padding-left: 2%;
  background: #ffffff;
  margin: 0.8%;
}
.blocktop {
  display: flex;
  align-items: flex-start;
  color: #4e4e4e;
  width: 100%;
  height: 44%;
  font-size: 15px;
  /* border: 1px solid black; */
  box-sizing: border-box;
  font-weight: bold;
}
.blockmiddle {
  display: flex;
  align-items: flex-start;
  flex-direction: column;
  width: 100%;
  height: 26%;
  color: #4e4e4e;
  font-size: 23px;
  /* border: 1px solid black; */
  box-sizing: border-box;
}
.blockfooter {
  display: flex;
  align-items: flex-start;
  width: 100%;
  height: 30%;
  font-size: 14px;
  /* border: 1px solid black; */
  box-sizing: border-box;
  color: #4e4e4e;
}
.mainfooter {
  display: flex;
  justify-content: center;
  align-items:flex-start;
  height: 62px;
  width: 100%;
  /* border: 1px solid black; */
  box-sizing: border-box;
  text-align: center;
  font-weight: bold;
}
.moreposition{
  margin-top: 2%;
 
}
.el-button{
  padding: 12px 35px;
  letter-spacing: 6px;
}
</style>
<style>
* {
  margin: 0;
  padding: 0;
}
</style>


